<template>
  <div class="analysis" v-if="recipe.energy">
      <div ref="container" >
        <van-sticky :container="container" offset-top="70">
            <van-row type="flex" justify="space-between"  class="nutrition">
                <span class="mode1">营养分析</span>
                <span class="mode2 link" @click="getDetailList">查看详情</span>
            </van-row>
        </van-sticky>
        <van-row class="xijie" >
            <van-col span="17" class="left">
                <van-col span="8" class="icon">
                    <canvas width="80" height="75" class="canvas" ref="canvas">您的浏览器不支持canvas画布标签</canvas>
                </van-col>
                <van-col span="9" class="list">
                    <div v-for="(item,index) in recipe.nutrition_facts" :key="index">
                        <span class="dot" :style="{backgroundColor:item.pie_chart_color}"></span>
                        <span>{{item.nutrient}}</span>
                    </div>
                </van-col>
                <van-col span="7" class="math">
                    <div v-for="(item,index) in recipe.nutrition_facts" :key="index">{{item.amount}}</div>
                </van-col>
            </van-col>
            <van-col span="7" class="right">
                <div class="energy">{{recipe.energy}}</div>
                <div>千卡</div>
            </van-col>
        </van-row>
        <p class="text">{{recipe.nutrition_facts_hint_text}}</p>
      </div>

      <van-nav-bar
            v-if="src_id"
            title="详细营养分析"
            left-arrow
            @click-left.stop="onClickLeft"
            :fixed="true"
            :placeholder ="true"
            z-index="101"
        >
        </van-nav-bar>
      <iframe v-if="src_id" name="myiframe" id="myrame" :src="onSrc()" frameborder="0" height="90vh" width="100vw"   align="left"   scrolling="auto" marginWidth=0 marginHeight=0 class="iframesty">
        <p class="tip">你的浏览器不支持iframe标签</p>
      </iframe>
      
      
  </div>
</template>

<script>
export default {
    props:["recipe"],
    data() {
        return {
            container: null,
            src_id: null,
        };
    },
    mounted(){
        this.container = this.$refs.container;

        var canvas = this.$refs.canvas;
        var ctx = canvas.getContext("2d");
        var data = this.recipe.nutrition_facts.map(item => item.calorie);
        var color = this.recipe.nutrition_facts.map(item => item.pie_chart_color);
        // console.log(data);

        // 获取画布的宽度
        var canvasWidth = ctx.canvas.width;
        // 获取画布的高度
        var canvasHeight = ctx.canvas.height;

        // 圆心坐标
        var x = canvasWidth / 2;
        var y = canvasHeight / 2;

        // 半径
        var radius = 35;
        // 一共多少份
        var num = data.length;
        // 每份的弧度
        // 当前数据/(总数据) = 当前数据所占比/360
        // 当前数据所占比 = 当前数据/(总数据)*360* (1 / 180 * Math.PI)
        //求和
        var long = 0;
        for( var i = 0; i < num; i++){
            long += data[i];
        }
        // console.log(long);

        // 开始弧度
        var startAngle = -90;
        // 结束弧度
        var endAngle = -90;
        var angle = 0;
        for (var j = 0; j < num; j++) {
            // 当前angle
            angle = data[j]/long * 360 * (1 / 180 * Math.PI);
            // 计算结束弧度
            endAngle += angle;

            ctx.beginPath();
            ctx.moveTo(x-5, y);
            ctx.arc(x-5, y, radius, startAngle, endAngle);
            ctx.closePath();
            ctx.fillStyle = color[j];
            ctx.fill();
            // 上一个扇形的结束弧度,就是下一个扇形开始的弧度
            startAngle = endAngle;
        }
        ctx.beginPath();
        ctx.moveTo(x-5,y);
        ctx.arc( x-5,y, radius/2, 0, 2*Math.PI);
        ctx.closePath();
        ctx.fillStyle = "white";
        ctx.fill();
    },
    methods:{
        getDetailList(){
            console.log(this.$route.query.id);
            this.src_id = this.$route.query.id;
        },
        onClickLeft(){
            this.src_id = null;
        },
        onSrc(){
           return 'https://m.douguo.com/recipe/nutrient_self_new/' + this.src_id
        }
    }
}
</script>

<style lang="less">
.detail .analysis{
    // padding: 15px;
    padding-bottom: 0;
    .van-nav-bar .van-nav-bar__content{
          background-color: white;
          height: 60px;
      }
     .van-nav-bar .van-nav-bar__content  .van-icon{
          color: #000;
      }
     .van-nav-bar__title{
         margin-left: 35px;
     }
    .iframesty{
        position: fixed;
        top: 60px;
        left: 0;
        height: 100vh;
        width: 100vw;
        z-index: 100;
        background-color: white;
    }
    .nutrition{
        background-color: white;
        height: 40px;
        line-height: 40px;
        .link{
            color: #50969f;
        }
        .mode1{
            font-weight: 600;
             margin-left: 15px;
        }
        .mode2{
            font-size: 13px;
             margin-right: 15px;
        }
    }
    .xijie{
        padding: 0 15px;
        // padding-bottom: 0;

        display: flex;
        align-items: center;
        .left{
            line-height: 25px;
            .list{
                font-size: 12px;
                color: #828282;
                .dot{
                    display: inline-block;
                    height: 12px;
                    width: 12px;
                    border-radius: 50%;
                    background-color: pink;
                    margin-right: 10px;
                    vertical-align: middle;
                    margin-bottom: 4px;
                }
            }
            .math{
                font-size: 13px;
                font-weight: 600;
            }
        }
        .right{
            border-left: 1px solid #dfdcdc;
            font-size: 15px;
            color: #828282;
            display: flex;
            flex-direction: column;
            align-items: center;
            .energy{
                font-size: 20px;
                font-weight: 700;
                color: black;
            }
        }
    }
    .text{
        font-size: 14px;
        font-weight: 600;
        padding: 0 15px;
    }
}
</style>